<gm:page title="My App" authenticate="true" onload="init()">
  
  <!-- CSS -->
  <link rel="stylesheet" href="resources/screen.css" media="screen,projection"/>
  
  <style>
    body {
      background-color: #D8D8BF;
    }
  </style>

  <!-- JavaScript -->
  <script src="resources/gears_init.js"></script>
  <script src="resources/prototype.js"></script>
  <script src="resources/lightbox.js"></script>
  
  <script>
    // Change this to set the name of the managed resource store to create.
    // You use the name with the createManagedStore, and removeManagedStore,
    // and openManagedStore APIs. It isn't visible to the user.
    var STORE_NAME = "my_offline_docset";

    // Change this to set the URL of tha manifest file, which describe which
    // URLs to capture. It can be relative to the current page, or an
    // absolute URL.
    var MANIFEST_FILENAME = "resources/manifest.json";

    var localServer;
    var store;
    
    function createStore() {
      if (!window.google || !google.gears) {
        alert("You must install Google Gears first.");
        return;
      }

      store.manifestUrl = MANIFEST_FILENAME;
      store.checkForUpdate();

      var timerId = window.setInterval(function() {
        // When the currentVersion property has a value, all of the resources
        // listed in the manifest file for that version are captured. There is
        // an open bug to surface this state change as an event.
        if (store.currentVersion) {
          window.clearInterval(timerId);
          alert("The documents are now available offline. The version stored is: " + store.currentVersion);
        }
        else if (store.updateStatus == 3) {
          alert("Error: " + store.lastErrorMessage);
        }
      }, 500);
    }

    // Remove the managed resource store.
    function removeStore() {
      if (!window.google || !google.gears) {
        alert("You must install Google Gears first.");
        return;
      }

      localServer.removeManagedStore(STORE_NAME);
      alert("Done. The local store has been removed.");
    }
  </script>

  <script>
    function init() {
      if (!window.google || !google.gears) {
        alert("NOTE: You must install Google Gears first.");
      }
      else {
        localServer = google.gears.factory.create('beta.localserver', '1.0');
        store = localServer.createManagedStore(STORE_NAME);
        alert("Yay, Google Gears is already installed.");
      }
    }
    function addToPublicDirectory(DOMElement) {
      var entry = google.mashups.getEntryForElement(DOMElement);
      var publicMashupsList = google.mashups.getObjectById('publicMashupsList');
      publicMashupsList.getData().addEntry(GPath.cloneEntry(entry));
    }
    function geocodeInputForm() {
      var geocoder = new GClientGeocoder();
      var destinationInput = document.getElementById('destinationInput');
      var longitudeInput = document.getElementById('longitudeInput');
      var latitudeInput = document.getElementById('latitudeInput');

      geocoder.getLatLng(destinationInput.value,
        function(point) {
          if (point) {
            longitudeInput.value = point.lng().toString();
            latitudeInput.value = point.lat().toString();
          }
          else {
            longitudeInput.value = '';
            latitudeInput.value = '';
          }
        }
      );
    }
    function createNewTrip() {
      var nameInput = document.getElementById('nameInput');
      var destinationInput = document.getElementById('destinationInput');
      var longitudeInput = document.getElementById('longitudeInput');
      var latitudeInput = document.getElementById('latitudeInput');
    
      if (latitudeInput.value=='' || longitudeInput.value=='') {
        alert("Destination not recognized");
        return;
      }
    
      //lightbox.prototype.deactivate();
      
      var stopsList = google.mashups.getObjectById('stopsList');
      var newEntry = stopsList.getData().createEntry();
      new GPath('atom:title').setValue(newEntry, nameInput.value);
      new GPath('gmd:destination').setValue(newEntry, destinationInput.value);
      new GPath('gmd:long').setValue(newEntry, longitudeInput.value);
      new GPath('gmd:lat').setValue(newEntry, latitudeInput.value);
      stopsList.getData().addEntry(newEntry);
    }
    function displayNearbyHotels(entry) {
      var hotelList = google.mashups.getObjectById('hotelList');
      var destinationLat = new GPath('gmd:lat').getValue(entry);
      var destinationLong = new GPath('gmd:long').getValue(entry);

      hotelList.setData('http://www.google.com/base/feeds/snippets?bq=%5Bitem%20type:Hotels%5D%20%5blocation:%40%22' + destinationLat + destinationLong + '%22%2b3mi%5d');
    }
    function displayAlbum(entry) {
      var photosURL = new GPath('atom:title').getValue(entry);
      var photosList = google.mashups.getObjectById('photosList');
      photosList.setData(photosURL);
    }
    function test(event) {
      var unselectedTripContainer = document.getElementById('unselectedTripContainer');
      var selectedTripContainer = document.getElementById('selectedTripContainer');
      
      unselectedTripContainer.style.display = 'none';
      selectedTripContainer.style.display = 'none';
      
      if (event) {
        selectedTripContainer.style.display = 'block';
      }
      else {
        unselectedTripContainer.style.display = 'block';
      }
    }
    function showSection(sectionName) {
      var container = google.mashups.App.getContainer('myContainer'); 
      container.showSection(sectionName); 
    }
    function newTest() {
      alert('newTest()');
    }
  </script>
  
  <!--<gm:list id="publicMashupsList" data="${app}/publicMashups"/>
  <p/>-->
  <table width="1000" align="center">
    <tr>
      <td width="250" valign="top">
        <gm:list id="privateMashupsList" data="${user}/privateMashups" template="privateMashupsListTemplate">
          <!--<gm:handleEvent event="select" execute="displayNearbyHotels(event.entry)"/>-->
          <gm:handleEvent event="select" execute="test(event.entry)"/>
        </gm:list>
      </td>
      <td width="15"/>
      <td valign="top">
        <div id="unselectedTripContainer" style="color:gray; font-family:sans-serif; font-size:14pt">
          No trip selected
        </div>
        <div id="selectedTripContainer" style="display:none">
          <table>
            <tr>
              <td><img src="resources/Logo_25wht.gif" onclick="showSection('detailsSection')"/></td>
              <td style="padding-left:15px"><img src="resources/Logo_25wht.gif" onclick="showSection('photosSection')"/></td>
              <td style="padding-left:15px"><img src="resources/Logo_25wht.gif" onclick="showSection('blogSection')"/></td>
            </tr>
          </table>
          
          <gm:container id="myContainer">
            <gm:section id="detailsSection" title="Details">
              <gm:list id="stopsList" data="${privateMashupsList}/stops" template="stopsListTemplate">
                <gm:handleEvent event="select" src="map"/>
                <!--<gm:handleEvent event="select" execute="displayNearbyHotels(event.entry)"/>-->
              </gm:list>
              
    <div style="border:solid black 1px; height:15px; text-align:center; width:15px">
      <a href="#lightbox1" rel="lightbox1" class="lbOn">+</a>
    </div>
              <div style="height:500px; width:500px">
              <gm:map id="map" data="${privateMashupsList}/stops" latref="gmd:lat" lngref="gmd:long" infotemplate="mapsInfoWindowTemplate">
                <gm:handleEvent event="select" src="stopsList"/>
              </gm:map>
              </div>
          
            </gm:section>
            <gm:section id="photosSection" title="Photos">
              <gm:data id="photosData">
                <feed>
                  <entry>
                    <id>1</id>
                    <title>http://picasaweb.google.com/data/feed/base/user/levikcom/albumid/5083728396306002961?kind=photo</title>
                  </entry>
                </feed>
              </gm:data>
              <gm:list data="${photosData}">
                <gm:handleEvent event="select" execute="displayAlbum(event.entry)"/>
              </gm:list>
              <gm:list id="photosList" template="photosListTemplate"/>
            </gm:section>
            <gm:section id="blogSection" title="Blog">
              <p>
                <button onclick="createStore()">Capture</button>
             </p>
             <p>
               <button onclick="removeStore()">Erase</button>
             </p>
            </gm:section>
          </gm:container>
        </div>
        <div id="lightbox1" class="leightbox">

	<h1>Leightbox 1</h1>

	Name:
            <br/><input id="nameInput" type="text" size="80"/><br/>
            Destination:
            <br/><input id="destinationInput" type="text" size="80" onchange="geocodeInputForm()"/><br/>
            Latitude:
            <br/><input id="latitudeInput" type="text" size="80" readonly="true"/><br/>
            Longitude:
            <br/><input id="longitudeInput" type="text" size="80" readonly="true"/><br/>
            <input type="button" value="Create" onclick="createNewTrip()"/>
	<p class="footer">
	  <a href="#" class="lbAction" rel="deactivate">Close</a>
	</p>
        </div>
      </td>
    </tr>
  </table>
  
  <gm:list id="hotelList" template="base"/>
  
  <gm:template id="privateMashupsListTemplate">
    <table class="blue-theme" style="width:250px">
      <thead>
        <tr>
          <th>Your trips</th>
        </tr>
      </thead>
      <tr repeat="true">
        <td><gm:text ref="atom:title"/></td>
        <!--<td><input type="button" value="Add to public directory" onclick="addToPublicDirectory(this)"/></td>-->
      </tr>
    </table>
    <div style="margin-top:10px; text-align:center">
      <gm:create label="New"/>
    </div>
  </gm:template>
  <gm:template id="mapsInfoWindowTemplate">
    <h1><gm:text ref="gmd:destination"/></h1>
    <h4><gm:text ref="atom:title"/></h4>
  </gm:template>
  <gm:template id="stopsListTemplate">
    <table class="blue-theme" style="width:100%">
      <thead>
        <tr>
          <th>Stop</th>
          <th>Start date</th>
          <th>Stop date</th>
        </tr>
      </thead>
      <tr repeat="true">
        <td><gm:text ref="atom:title"/></td>
        <td><gm:text ref="gd:when/@startTime"/></td>
        <td><gm:text ref="gd:when/@endTime"/></td>
      </tr>
    </table>
  </gm:template>
  <gm:template id="photosListTemplate">
     <table border="1">
       <tbody repeat="true">
         <tr>
           <td><gm:toggle/></td>
           <td><gm:image ref="media:group/media:thumbnail/@url" height="54" width="54" mode="fill" style="float:left"/></td>
           <td><gm:text ref="atom:title"/></td>
         </tr>
         <tr class="gm-toggled">
           <!--<td colspan="3"><gm:image ref="media:group/media:content/@url"/></td>-->
         </tr>
     </table>
     <!--<div repeat="true" style="padding: 5px">
        <gm:image ref="media:group/media:thumbnail/@url" height="54" width="54" mode="fill" style="float: left"/>
        <gm:text ref="atom:title"/>
        <br style="clear: both"/>
     </div>-->
  </gm:template>  
</gm:page>